<template>
    <van-sticky>
        <div class="home-search-bar">
            <div class="home-search-icon" @click.stop="handleEmpty">
                <van-icon name="scan" size="26px"/>
            </div>
            <search-bar class="home-search" readonly @click="$router.push('/search')"/>
            <div class="home-search-icon" @click.stop="handleEmpty">
                <van-icon name="chat-o" size="26px"/>
            </div>
        </div>
    </van-sticky>
</template>

<script>
  import { Icon, Search, Sticky, Toast } from "vant"
  import SearchBar from "@/components/SearchBar"

  export default {
    name: "HomeSearchBar",
    components: {
      SearchBar,
      [Sticky.name]: Sticky,
      [Icon.name]: Icon,
      [Search.name]: Search,
    },
    methods: {
      handleEmpty() {
        Toast("我只是在这站个岗~")
      },
    },
  }
</script>

<style lang="scss" scoped>
    .home-search-bar {
        display: flex;
        align-items: center;
        background: #fff;

        .home-search {
            flex: 1;

            ::v-deep .search-input {
                padding: 8px 0;
            }
        }

        .home-search-icon {
            display: inline-flex;
            flex-direction: column;
            align-items: center;
            margin: 0 10px;

            .home-search-icon-name {
                font-size: 10px;
            }
        }
    }
</style>
